<template>
  <el-dialog v-model="dialogVisible" title="博客设置" width="500px">
    <el-form :model="settings" label-width="140px">
      <el-form-item label="自定义访问路径：">
        <el-input v-model="settings.blogSubUrl" placeholder="请输入自定义访问路径" />
      </el-form-item>
      <el-form-item label="是否允许评论：">
        <el-radio-group v-model="settings.enableComment">
          <el-radio :label="true">允许</el-radio>
          <el-radio :label="false">禁止</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage } from 'element-plus';

interface BlogSettingsProps {
  modelValue: boolean;
  blogSubUrl?: string;
  enableComment?: boolean;
}

const props = withDefaults(defineProps<BlogSettingsProps>(), {
  modelValue: false,
  blogSubUrl: '',
  enableComment: true
});

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'settings-updated', settings: { blogSubUrl: string; enableComment: boolean }): void;
}>();

const dialogVisible = ref(false);
const settings = reactive({
  blogSubUrl: '',
  enableComment: true
});

// 监听props变化，更新本地数据
watch(
  () => props.modelValue,
  newVal => {
    dialogVisible.value = newVal;
    if (newVal) {
      settings.blogSubUrl = props.blogSubUrl;
      settings.enableComment = props.enableComment;
    }
  }
);

// 监听对话框关闭
watch(
  () => dialogVisible.value,
  newVal => {
    if (!newVal) {
      emit('update:modelValue', false);
    }
  }
);

// 取消
const handleCancel = () => {
  dialogVisible.value = false;
};

// 确认更新设置
const handleConfirm = () => {
  emit('settings-updated', {
    blogSubUrl: settings.blogSubUrl,
    enableComment: settings.enableComment
  });
  ElMessage.success('设置已暂存，保存/发布博客后生效');
  dialogVisible.value = false;
};
</script>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
